<script setup>
import { ref, watchEffect } from "vue";

const checked = ref(false)
const toggle = ref('no')

watchEffect(() => {
  console.log(toggle.value, '===='); // yes/no
})
</script>

<template>
  <input type="checkbox" id="checkbox" v-model="checked" />
  <label for="checkbox">{{ checked }}</label>
  <!-- true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用 -->
  <!-- 这里 toggle 属性的值会在选中时被设为 'yes'，取消选择时设为 'no' -->
  <input type="checkbox" id="toggle" v-model="toggle" true-value="yes" false-value="no">
  <label for="toggle">{{ toggle }}</label>
</template>

<style></style>
